import {Alert, View, Text, TextInput} from 'react-native';
import React, {Component} from 'react';
import {Button, Switch, Dialog} from '@rneui/themed';

export default class Printer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      printers: [],
      printDisable: false,
      printTestVisible: false,
    };
    this.save = this.save.bind(this);
  }

  componentDidMount() {
    let printers = [
      {
        name: '蓝牙打印机',
        address: '00:81:a7:81:aa:86',
      },
      {
        name: 'WIFI打印机',
        address: '172.16.1.15',
      },
    ];
    this.setState({
      printers: printers,
    });
  }

  save() {
    Alert.alert('成功');
  }

  render() {
    const list = [
      {title: 'List Item 1'},
      {title: 'List Item 2'},
      {
        title: 'Cancel',
        containerStyle: {backgroundColor: 'red'},
        titleStyle: {color: 'white'},
        onPress: () =>
          this.setState({
            printTestVisible: false,
          }),
      },
    ];
    return (
      <View>
        <View>
          <View
            style={{
              borderBottomWidth: 1,
              backgroundColor: '#FFF',
              borderBottomColor: '#E6E6E6',
            }}>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginLeft: 20,
                borderBottomWidth: 1,
                borderBottomColor: '#E6E6E6',
              }}>
              <View
                style={{
                  justifyContent: 'center',
                }}>
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    marginRight: 10,
                  }}>
                  <Text style={{fontSize: 16, color: '#262626'}}>
                    {'打印机选择'}
                  </Text>
                </View>
              </View>
              <View
                style={{
                  flex: 1,
                  height: 55,
                  flexDirection: 'row',
                  alignItems: 'center',
                  marginRight: 20,
                  justifyContent: 'flex-end',
                }}
              />
            </View>
          </View>
          <View
            style={{
              borderBottomWidth: 1,
              backgroundColor: '#FFF',
              borderBottomColor: '#E6E6E6',
            }}>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginLeft: 20,
                borderBottomWidth: 1,
                borderBottomColor: '#E6E6E6',
              }}>
              <View
                style={{
                  justifyContent: 'center',
                }}>
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    marginRight: 10,
                  }}>
                  <Text style={{fontSize: 16, color: '#262626'}}>
                    {'是否开启打印'}
                  </Text>
                </View>
              </View>
              <View
                style={{
                  flex: 1,
                  height: 55,
                  flexDirection: 'row',
                  alignItems: 'center',
                  marginRight: 20,
                  justifyContent: 'flex-end',
                }}>
                <Switch
                  value={this.state.printDisable}
                  onValueChange={value => {
                    this.state.printDisable = value;
                    this.setState(this.state);
                  }}
                />
              </View>
            </View>
          </View>
          <View
            style={{
              borderBottomWidth: 1,
              backgroundColor: '#FFF',
              borderBottomColor: '#E6E6E6',
            }}>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginLeft: 20,
                borderBottomWidth: 1,
                borderBottomColor: '#E6E6E6',
              }}>
              <View
                style={{
                  justifyContent: 'center',
                }}>
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    marginRight: 10,
                  }}>
                  <Text style={{fontSize: 16, color: '#262626'}}>
                    {'打印测试'}
                  </Text>
                </View>
                <View>
                  <Text style={{fontSize: 12, color: '#989898'}}>
                    {'使用zpl指令测试'}
                  </Text>
                </View>
              </View>
              <View
                style={{
                  flex: 1,
                  height: 55,
                  flexDirection: 'row',
                  alignItems: 'center',
                  marginRight: 20,
                  justifyContent: 'flex-end',
                }}>
                <Button
                  title="输入指令"
                  type="outline"
                  size="sm"
                  onPress={() => {
                    this.setState({
                      printTestVisible: true,
                    });
                  }}
                />
                <Dialog
                  isVisible={this.state.printTestVisible}
                  onBackdropPress={() => {
                    this.setState({
                      printTestVisible: false,
                    });
                  }}>
                  <Dialog.Title title="ZPL指令" />
                  <TextInput
                    style={{
                      height: 100,
                      margin: 12,
                      borderWidth: 1,
                      padding: 10,
                    }}
                    autoFocus
                    multiline
                    numberOfLines={4}
                  />
                  <Dialog.Actions>
                    <Dialog.Button
                      title="确认"
                      onPress={() => {
                        this.setState({
                          printTestVisible: false,
                        });
                      }}
                    />
                    <Dialog.Button
                      title="取消"
                      onPress={() => {
                        this.setState({
                          printTestVisible: false,
                        });
                      }}
                    />
                  </Dialog.Actions>
                </Dialog>
              </View>
            </View>
          </View>
        </View>
        <View style={{width: '100%', alignItems: 'center', marginTop: '20%'}}>
          <Button
            title="保存设置"
            onPress={() => {}}
            buttonStyle={{
              backgroundColor: '#2089dc',
            }}
          />
        </View>
      </View>
    );
  }
}
